<template>
  <div class="wrapper">
    <!-- 概述 -->
    <div class="code_list">
      <div  class="code_item" 
            v-for="(item,index) in quDataAll" 
            :key="index" 
            @click="skip(item,index)"
            :class="index === activeIndex?'active':''">{{index+1}}</div>
    </div>
    <!-- 题目 -->
    <div class="article" v-html="ietmQu.article"></div> 
    <div class="qu-container">
      <div v-for="(item,index) in ietmQu.quData" :key="index" class="qu_item">
        <div class="title">{{index+1}}. {{item.text}}</div>
        <div class="option"> 
          <el-radio-group v-model="item.radio">
            <el-radio label="T">T</el-radio>
            <el-radio label="F">F</el-radio>
          </el-radio-group>
        </div>
        <div class="answer_container" :class="item.answer === item.radio?'success':'error'" v-if="answerShow" >正确答案: {{item.answer}}</div>
      </div>
    </div>

    <!-- 操作 -->
    <div class="manipulate">
      <el-button type="success" class="button" @click="answerShow=true">查看答案</el-button>
      <el-button type="primary" class="button" @click="nextqu">下一题</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      quDataAll:[],
      ietmQu:{},
      activeIndex:0,
      answerShow:false,
    }
  },
  mounted(){
    this.get_quDataFun()
  },
  methods:{
    get_quDataFun(){
      this.$axios({
        methods:'get',
        url:`../../static/data/yuedu1.json`
      }).then((response)=>{
        console.log(response)
        this.quDataAll = response.data.data;
        this.ietmQu = response.data.data[0];
      })
    },
    // 题号
    skip(row,index){
      this.answerShow = false
      this.activeIndex = index
      this.ietmQu = row
    },
    // 下一题
    nextqu(){
      if(this.activeIndex < this.quDataAll.length-1){
        this.activeIndex++
        this.ietmQu = this.quDataAll[this.activeIndex]
        this.answerShow = false
      }else{
        this.$message({
          message: '最后一题',
          type: 'error'
        });
      }
    },

  }

};
</script>

<style scoped>
.answer_container{
  padding: 10px;
  color:#fff;
  margin-top: 10px;
}
.success{
  background: #409EFF;
}
.error{
  background: #F56C6C;
}
.info{
  background: #909399;
}

.wrapper{
  box-sizing: border-box;
  width: 100vw;
  overflow: hidden;
}
.article{
  text-align: left;
  border: 1px solid #eee;
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  text-indent:25px;
  line-height: 26px;
  margin-top: 10px;
}
.qu-container{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  border: 1px solid #eee;
  padding-bottom: 50px;
}
.qu_item{
  margin-top: 20px;
}
.option{
  margin-left: 20px;
  margin-top: 10px;
}
.key{
  margin-top: 6px;
}
.code_list{
  width: 100%;
  padding: 10px;
  border: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.code_item{
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 40px;
  margin-left: 10px;
  margin-top:10px;
}
.active{
  background:#409EFF;
  color: #fff;
}
.manipulate{
  position: fixed;
  right: 0px;
  top: 50%;
  display: flex;
  flex-direction: column;
}
.manipulate .button{
  margin-top: 10px;
}
</style>